/*
 * 学生信息->列表
 * @Author: ice
 * @Date: 2018-09-26 15:06:15
 * @Last Modified by: redman9
 * @Last Modified time: 2018-10-26 15:42:47
 */
<template>
    <div
        class="container stu-list-container"
        v-loading="importing">
        <div
            class="operate-bar"
            v-if="authResult.auth_import">
            <a href="//cdn.zsdx.cn/admin/file/StudentInformationTemplate.xls?v=1">
                <el-button size="mini">下载模版</el-button>
            </a>
            <div class="btn-import-wrap">
                <input
                    class="import-input"
                    accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
                    type="file"
                    @change="tirggerFile($event)">
                <el-button
                    size="mini"
                    type="primary">数据导入</el-button>
            </div>
        </div>
        <div class="stu-list-main">
            <div
                class="search-bar"
                @keypress.native.enter="fnSearch(1)">
                <el-form
                    placeholder="请选择"
                    :inline="true"
                    class="search-form-inline"
                    ref="searchform"
                    :model="searchform">
                    <el-form-item label="省市:">
                        <el-cascader
                            :options="regin"
                            expand-trigger="hover"
                            change-on-select
                            size="mini"
                            :filterable="true"
                            v-model="searchform.proCity"
                            class="search-input"
                            :props="{
                                label: 'name',
                                value: 'name',
                                children: 'children'
                        }" />
                    </el-form-item>
                    <el-form-item
                        label="
                            学校名称:">
                        <el-input
                            size="mini"
                            v-model="searchform.school"
                            class="search-input" /></el-form-item>
                    <el-form-item label="学院:">
                        <el-input
                            size="mini"
                            v-model="searchform.school_college"
                            class="search-input" />
                    </el-form-item>
                    <el-form-item label="学校专业:">
                        <el-input
                            size="mini"
                            v-model="searchform.major"
                            class="search-input" />
                    </el-form-item>
                    <el-form-item label="姓名:">
                        <el-input
                            size="mini"
                            v-model="searchform.true_name"
                            class="search-input" />
                    </el-form-item>
                    <el-form-item label="学生年龄:">
                        <el-input
                            size="mini"
                            v-model="searchform.minAge"
                            class="search-input age-input" />~
                        <el-input
                            size="mini"
                            v-model="searchform.maxAge"
                            class="search-input age-input" />
                    </el-form-item>
                    <el-form-item label="籍贯:">
                        <el-cascader
                            :options="regin"
                            expand-trigger="hover"
                            :filterable="true"
                            change-on-select
                            size="mini"
                            v-model="searchform.birthPlace"
                            class="search-input"
                            :props="{
                                label: 'name',
                                value: 'name',
                                children: 'children'
                        }" />
                    </el-form-item>
                    <el-form-item label="平台:">
                        <el-select
                            class="search-input"
                            size="mini"
                            v-model="searchform.user_flag"
                            placeholder="请选择">
                            <el-option
                                label="全部"
                                :value="-1" />

                            <el-option
                                label="实习生"
                                :value="1" />
                            <el-option
                                label="校园小B"
                                :value="16" />
                            <el-option
                                label="高校洗衣机数据"
                                :value="8" />
                            <el-option
                                label="无业务"
                                :value="0" />
                        </el-select>
                    </el-form-item>
                    <el-form-item class="search-btnsearch-btn">
                        <el-button
                            size="mini"
                            type="primary"
                            @click="fnSearch(1)">搜索</el-button>
                        <el-button
                            size="mini"
                            @click="fnReset()">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>

            <el-table
                v-loading="loading"
                class="stu-table"
                height="calc(100% - 150px)"
                :data="tableData"
                :empty-text="loading ? '' : '暂无数据'"
                style="width: 100%;">
                <!-- <el-table-column
                    type="selection"
                    width="55" /> -->
                <el-table-column
                    fixed="left"
                    label="序号">
                    <template slot-scope="scope">
                        <div class="table-index">
                            {{ scope.$index + 1 }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    fixed="left"
                    min-width="150px"
                    prop="true_name"
                    :formatter="emptyFormatter"
                    :show-overflow-tooltip="true"
                    label="姓名" />
                <el-table-column
                    min-width="200px"
                    label="身份标识">
                    <template slot-scope="scope">
                        <div class="user-tags">
                            <div
                                class="user-tag"
                                v-for="(item, index) in scope.row.user_flag"
                                :key="index"
                                :style="'background-image: url('+fnGetTagLogo(item)+')'">
                                <span>{{ item | filterTag }}</span>
                            </div>
                            <div v-if="!scope.row.user_flag || scope.row.user_flag.length <= 0">--</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    :formatter="sexFormatter"
                    prop="sex"
                    label="性别" />
                <el-table-column
                    prop="age"
                    :formatter="ageFormatter"
                    label="年龄" />
                <el-table-column
                    width="180px"
                    prop="date"
                    label="籍贯">
                    <template slot-scope="scope">
                        <span class="table-true-name ellipsis">{{ scope.row.birth_province ? scope.row.birth_province + scope.row.birth_city : '--' }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    width="140px"
                    :formatter="emptyFormatter"
                    :show-overflow-tooltip="true"
                    prop="ethnic"
                    label="民族" />
                <el-table-column
                    min-width="180px"
                    prop="school"
                    :formatter="emptyFormatter"
                    :show-overflow-tooltip="true"
                    label="学校名称" />
                <el-table-column
                    width="150px"
                    :show-overflow-tooltip="true"
                    :formatter="emptyFormatter"
                    prop="province"
                    label="省份" />
                <el-table-column
                    width="150px"
                    :formatter="emptyFormatter"
                    :show-overflow-tooltip="true"
                    prop="city"
                    label="城市" />
                <el-table-column
                    width="150px"
                    prop="school_area"
                    :formatter="emptyFormatter"
                    :show-overflow-tooltip="true"
                    label="校区" />
                <el-table-column
                    width="180px"
                    prop="school_college"
                    :formatter="emptyFormatter"
                    :show-overflow-tooltip="true"
                    label="学院" />
                <el-table-column
                    width="180px"
                    prop="major"
                    :formatter="emptyFormatter"
                    :show-overflow-tooltip="true"
                    label="专业" />
                <el-table-column
                    prop="educate_year"
                    label="年级" />
                <el-table-column
                    prop="date"
                    label="操作"
                    fixed="right"
                    width="150">
                    <template slot-scope="scope">
                        <div class="operates">
                            <el-button
                                v-if="authResult.auth_detail"
                                type="text"
                                @click="fnGoDetail(scope.row.hd_user_no)">详情</el-button>
                            <!-- <el-popover
                                v-if="authResult.auth_delete"
                                v-model="scope.row.visible"
                                placement="top"
                                trigger="manual"
                                width="180">
                                <span :class="'test'+scope.row.hd_user_no">确认删除该学生信息？</span>
                                <div style="text-align: right; margin: 0">
                                    <el-button
                                        size="mini"
                                        type="text"
                                        @click="() => {$set(scope.row, 'visible', false);}">取消</el-button>
                                    <el-button
                                        type="primary"
                                        size="mini"
                                        @click="() => {$set(scope.row, 'visible', false);fnDelete(scope.row.hd_user_no)}">确定</el-button>
                                </div>
                                <el-button
                                    class="btn-delete"
                                    slot="reference"
                                    type="text"
                                    @click="() => {$set(scope.row, 'visible', true);}">删除{{ scope.row.visible }}</el-button>
                            </el-popover> -->
                            <el-button
                                class="btn-delete"
                                type="text"
                                @click="fnConfirmDelete(scope.row)">删除{{ scope.row.visible }}</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                v-if="page.total_page > 1"
                class="page-bar"
                :current-page="page.now_page"
                background
                layout="prev, pager, next"
                :page-size="page.page_size"
                :total="page.total_count"
                @current-change="fnSearch" />
        </div>
    </div>
</template>

<script>
import regin from '@/assets/js/regin.min.js';
export default {
    components: {},
    data() {
        return {
            breadcrumbList: [
                {
                    title: "学生信息管理",
                },
                {
                    title: "信息列表"
                }
            ],
            authResult: {},
            regin: regin,
            proCityOptions: [],
            mode: 'view',
            hd_user_no: '',
            searchform: {
                proCity: ['不限', ''],
                school: '',
                school_college: '',
                major: '',
                true_name: '',
                maxAge: '',
                minAge: '',
                birthPlace: ['不限', ''],
                user_flag: -1,
            },
            student: '',
            updateObj: {},
            tableData: [],
            loading: false,
            page: {
                now_page: 1,
                total_page: 0,
                page_size: 0,
                total_count: 0,
                now_page_size: 0,
            },
            importing: false,
        };
    },
    filters: {
        filterSex(val) {
            if (val == 1) {
                return '男';
            } else if (val == 2) {
                return '女';
            } else {
                return '未知';
            }
        },
        filterEducateYear(val) {
            if (val <= 1) {
                return '大一';
            } else if (val == 2) {
                return '大二';
            } else if (val == 3) {
                return '大三';
            } else if (val == 4) {
                return '大四';
            } else {
                return '其他';
            }
        },
        filterTag(val) {
            switch (val) {
                case 1: return '实';
                case 2: return '';
                case 4: return '';
                case 8: return '洗';
                default: return '';
            }
        },
        emptyFilter(val) {
            if (val) {
                return val;
            }
            return '--';
        }
    },
    methods: {
        fnConfirmDelete(data) {
            this.$confirm('确认删除该学生信息?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.fnDelete(data.hd_user_no);
            }).catch(() => {
            });
        },
        fnGetTagLogo(val) {
            switch (val) {
                case 1: return '';
                case 2: return '//cdn.zsdx.cn/admin/images/student/tag_logo_2.png';
                case 4: return '//cdn.zsdx.cn/admin/images/student/tag_logo_4.png';
                case 8: return '';
                default: return '';
            }
        },
        ageFormatter(row, column, val) {
            if (val == 0) {
                return '未知';
            } else {
                return val;
            }
        },
        sexFormatter(row, col, val) {
            if (val == 1) {
                return '男';
            }
            if (val == 2) {
                return '女';
            }
            if (val == 0) {
                return '未知';
            }
        },
        emptyFormatter(row, column, val) {
            if (!val) {
                return '--';
            }
            return val;
        },
        tirggerFile(e) {
            var file = event.target.files[0];

            let form = new FormData();

            form.append("student_file", file);

            this.importing = true;
            this.$post('/studata/student%5Cimport', form, resp => {
                this.importing = false;
                if (resp.code == 1) {
                    this.page.now_page = 1;
                    this.fnSearch(1);
                    this.$message({
                        type: 'success',
                        message: resp.msg,
                        center: true
                    });
                } else {
                    this.$message({
                        type: 'warning',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },
        fnExport() { },
        fnImport(file, fileList) {
            let form = new FormData();

            form.append("student_file", file);

            this.importing = true;
            this.$post('/studata/student%5Cimport', form, resp => {
                this.importing = false;
                if (resp.code == 1) {
                    this.page.now_page = 1;
                    this.fnSearch();
                    this.$message({
                        type: 'success',
                        message: resp.msg,
                        center: true
                    });
                } else {
                    this.$message({
                        type: 'warning',
                        message: resp.msg,
                        center: true
                    });
                }
                document.querySelector(".import-input").reset();
            });
        },
        fnReset() {
            this.searchform = {
                proCity: ['不限', ''],
                school: '',
                school_college: '',
                major: '',
                true_name: '',
                maxAge: '',
                minAge: '',
                birthPlace: ['不限', ''],
                user_flag: -1,
            };
            this.fnSearch(1);
        },
        fnSearch(page) {
            if (page) {
                this.page.now_page = page;
            }
            this.loading = true;
            this.tableData = [];
            this.$post('/studata/student%5Cget_list', {
                true_name: this.searchform.true_name,
                user_flag: this.searchform.user_flag,
                page_id: this.page.now_page,
                province: this.searchform.proCity.length >= 1 ? (this.searchform.proCity[0] == '不限' ? '' : this.searchform.proCity[0]) : '',
                city: this.searchform.proCity.length >= 2 ? this.searchform.proCity[1] : '',
                school: this.searchform.school,
                school_college: this.searchform.school_college,
                major: this.searchform.major,
                age_range: (this.searchform.minAge !== '' && this.searchform.maxAge !== '') ? (this.searchform.minAge + ',' + this.searchform.maxAge) : '',
                birth_province: this.searchform.birthPlace.length >= 1 ? (this.searchform.birthPlace[0] == '不限' ? '' : this.searchform.birthPlace[0]) : '',
                birth_city: this.searchform.birthPlace.length >= 2 ? this.searchform.birthPlace[1] : '',
            }, resp => {
                this.loading = false;
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.page = resp.data.page;
                } else {
                    this.$message({
                        type: 'warning',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },
        fnDelete(id) {
            this.$post('/studata/student%5Cdelete', {
                hd_user_no: id
            }, resp => {
                if (resp.code == 1) {
                    this.$message({
                        type: 'success',
                        message: '操作成功',
                        center: true
                    });
                    this.fnSearch();
                } else {
                    this.$message({
                        type: 'warning',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },
        fnGoDetail(id) {
            this.$router.push({
                name: 'details',
                query: {
                    hd_user_no: id
                }
            });
        }
    },
    created() {
        this.$store.commit('SET_HEADER', this.breadcrumbList);
        this.authResult = this.$route.meta.authResult;
    },
    mounted() {
        this.fnSearch();
    }
};

</script>

 <style lang="less" scoped>
    .container {
      width: 100%;
      min-width: 700px;
    }
    .table-index {
      padding: 0 20px;
    }
    .operate-bar {
      position: relative;
      width: 100%;
      text-align: right;
      padding: 12px 20px;
      background: #fff;
      box-shadow: 0 1px 0 0 rgba(200, 200, 200, 0.5);
      z-index: 1;
    }
    .stu-list-main {
      width: 100%;
      height: calc(100% - 56px);
      padding: 15px;
      padding-bottom: 0;
      overflow: auto;
    }

    .search-bar {
      background: #fff;
      padding: 10px 15px 5px;
      padding-bottom: 10px;
    }
    .btn-delete {
      color: #fd4d32;
        &.is-disabled {
            color: #c0c4cc;
            cursor: not-allowed;
        }
    }
    .search-input {
      width: 150px;
    }
    .search-btn {
      margin-left: 5px;
    }
    .age-input {
      width: 66px;
      margin-right: 5px;
    }
    .search-form-inline .el-form-item {
      margin-bottom: 0;
    }
    .btn-import-wrap {
      margin-left: 15px;
      display: inline-block;
      position: relative;
      overflow: hidden;
      cursor: pointer;
      vertical-align: top;
      .import-input {
        margin-left: -100%;
        position: absolute;
        left: 0;
        top: 0;
        width: 200%;
        height: 100%;
        cursor: pointer;
        opacity: 0;
      }
    }
    .user-tags {
      white-space: nowrap;
      .user-tag {
        display: inline-block;
        vertical-align: top;
        margin-right: 3px;
        width: 20px;
        height: 20px;
        border-radius: 20px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-color: #1890ff;
        text-align: center;
        color: #fff;
        line-height: 20px;
        font-size: 12px;
      }
    }
    .page-bar {
      background: #f0f2f5;
      text-align: right;
      padding-top: 9px;
      padding-bottom: 5px;
    }
    .table-true-name {
      line-height: 1;
      display: inline;
    }
</style>
<style lang="less">
    .search-bar {
      background: #fff;
      padding: 10px 20px 5px;
      .el-form-item__label {
        width: 75px;
        text-align: left;
        margin-left: 5px;
      }
    }
    .operates {
      .el-button--text {
        padding: 0 6px 0 0 !important;
      }
    }
</style>
